<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
    *
    {
        margin: 0;
        padding: 0;
    }
    body
    {
        font-size: 12px;
        color:#555;
    }
    .container
    {
        border: solid 1px #e4e4e4;
    }
    .tab-bar
    {
        border-bottom: solid 1px #e4e4e4;
    }
    .tab
    {
        height: 30px;
        width: 120px;
        border-right: solid 1px #e4e4e4;
        text-align: center;
        cursor: pointer;
        line-height: 30px;
    }
    .tab-selected
    {
        background-color: #f3f3f3;
    }
    .fl
    {
        float:left;
    }
    .fr
    {
        float: right;
    }
    .clear
    {
        clear: both;
    }
    .content
    {
        height: 200px;
    }
    .hide
    {
        display: none;
    }
</style>
</head>

<body>
    <div class="container">
        <div class="tab-bar">
            <div class="tab fl" >
                TAB1
            </div>
            <div class="tab fl" >
                TAB2
            </div>
            <div class="clear"></div>
        </div>
        <div class="content hide">
            TABCONTENT1 123456
        </div>
        <div class="content">
            TABCONTENT2 7891011
        </div>
    </div>
    <script type="text/javascript">
       $('.tab').bind({
           'mouseenter':function(){
                var index = $(this).index();
                $(this).addClass('tab-selected');
                $('.tab').not(this).removeClass('tab-selected');
                $('.content').eq(index).show();
                $('.content').not(':eq('+index+')').hide();
            }
       });
    </script>
</body>
</html>
